<template>
  <div>
    <!-- 编辑弹窗 -->
    <cvue-dialog
      :dialogVisible="dialogVisible"
      :title="title"
      top="5vh"
      :dialogLoading="dialogLoading"
      dialogWidth="600px"
      @handleOpen="getDetail"
      @closeDialog="closeDialog"
      @confirmDialog="confirmDialog"
      @handleClose="handleClose">
      <div class="dialog-body role-permission-body" slot="dialogBody">
        <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="title" label="菜单名称" width="180"></el-table-column>
          <el-table-column prop="permissions" label="权限标识">
            <template slot-scope="scope">
              <el-checkbox v-for="(item,index) in scope.row.permissions" :key="index" v-model="item.checked">{{item.name}}</el-checkbox>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </cvue-dialog>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import cvueDialog from '@/components/cvue-dialog'
import { validPhone, validIp } from '@/util/validator.js'
export default {
  name: 'rolePermission',
  components: {
    cvueDialog
  },
  data () {
    return {
      ruleForm: {
        permission: []
      },
      rules: {
      },
      disabled: false,
      dialogLoading: false,
      permissions: [],
      tableData: [],
      treeList: []
    }
  },
  mounted () {
    this.getTreeData()
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    title () {
      var title = '操作权限'
      return title
    },
    ...mapGetters(['token'])
  },
  methods: {
    // 触发事件
    handleClose () {
      this.$emit('handleClose')
    },
    closeDialog () {
      this.$emit('closeDialog')
    },
    confirmDialog () {
      var pIds = []
      this.treeList.forEach((item, index) => {
        item.permissions.forEach((o, i) => {
          if (o.checked) {
            pIds.push(o.id)
          }
        })
      })
      var params = {
        permission_id: pIds.join(),
        role_id: this.$parent.rowData.id
      }
      this.dialogLoading = true
      this.$store.dispatch('manage/RolePermissionSave', params).then(res => {
        console.log(res)
        this.$message({
          message: res.msg,
          duration: 2000,
          type: 'success'
        })
        this.$emit('confirmDialog')
        this.dialogLoading = false
      }).catch(err => {
        this.$message({
          message: err.msg,
          duration: 2000,
          type: 'error'
        })
        this.dialogLoading = false
        // this.$emit('confirmDialog')
      })
    },
    getDetail () {
    },
    getTreeData () {
      var params = {
        role_id: this.$parent.rowData.id
      }
      this.dialogLoading = true
      this.$store.dispatch('manage/MenuTreePermissionsGet', params).then(res => {
        this.treeList = res.data
        this.tableData = this.getTree(res.data)
        console.log(this.tableData)
        var checkIds = []
        for (var i = 0; i < res.data.length; i++) {
          if (res.data[i].checked && res.data[i].children.length == 0) {
            checkIds.push(res.data[i].id)
          }
        }
        this.checkIds = checkIds
        // console.log(this.checkIds)
        this.dialogLoading = false
      }).catch(err => {
        this.$message({message: err.msg, duration: 2000, type: 'error'})
      })
    },
    // 遍历生成树
    getTree (treeData) {
      for (var i = 0; i < treeData.length; i++) {
        treeData[i].children = []
        for (var j = 0; j < treeData.length; j++) {
          if (treeData[i].id == treeData[j].pid) {
            treeData[i].children.push(treeData[j])
          }
        }
      }
      var arr = []
      for (i = 0; i < treeData.length; i++) {
        if (treeData[i].pid == '0') {
          arr.push(treeData[i])
        }
      }
      return arr
    },
    changeSelect (value) {
      console.log(value)
    }
  }
}
</script>
<style scoped>
.role-permission-body{
  height: 480px;
  overflow: auto;
}
</style>
